<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#toRight").click(function () {
                $("#right").append($("#left option:selected").clone());
            });
            $("#toRightAll").click(function () {
                $("#right").append($("#left option"));
            });
        });
    </script>
</head>
<body>

<select id="left" multiple style="width: 300px; height: 300px;">
    <option value="张三">张三</option>
    <option value="李四">李四</option>
    <option value="王五">王五</option>
    <option value="赵六">赵六</option>
    <option value="田七">田七</option>
    <option value="崔八">崔八</option>
</select>

<input type="button" value="右移" id="toRight">
<input type="button" value="右移全部" id="toRightAll">
<input type="button" value="左移" id="toLeft">
<input type="button" value="左移全部" id="toLeftAll">

<select id="right" multiple style="width: 300px; height: 300px;">
    <option value="小明">小明</option>
    <option value="小红">小红</option>
    <option value="小黑">小黑</option>
    <option value="小绿">小绿</option>
    <option value="小韩">小韩</option>
    <option value="小炮">小炮</option>
</select>


</body>
</html>